<template>
	<view>
		<view class="tab-list">
			<u-tabs active-color="#de1f1c" :is-scroll="!1" :bar-style="{borderRadius:'10rpx'}" :height="80" :list="tab" :current="current" @change="change"></u-tabs>
		</view>
		
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="item.id" :class="[`num${index % 3 + 1}`]">
				<view class="top-title u-flex">
					<view class="title u-flex-1 u-line-1">{{item.name || ''}}</view>
					<view class="type">{{getType(item.build_type)}}</view>
				</view>
				<view class="info u-flex">
					<image src="@/static/icon/ding.png"></image>
					<view class="price u-line-1">{{item.price}}元</view>
					<view class="date">{{$u.date(item.createtime,'yyyy-mm-dd')}}</view>
				</view>
			</view>
		</view>
		
		<u-empty v-if="isEmpty" text="暂无相关信息" margin-top="200"></u-empty>
		<u-loadmore :status="status" v-if="p > 1"></u-loadmore>
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: [{
						name: '意向金'
					}, {
						name: '定金'
					}
				],
				current: 0,
				
				isEmpty:!1,
				list:[],
				p:1,
				status:'loading'
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.p = 1
				this.list = ''
				this.getList()
			},
			getList(){
				this.isEmpty = !1
				this.$u.post('/api/user/deposit',{
					status:this.current + 1,
					p:this.p
				}).then(res=>{
					this.isEmpty = (this.p === 1 && res.length === 0) ? !0 : !1
					this.status = res.length  === 0 ? 'nomore' : 'loadmore'
					this.list = this.p == 1 ? res : this.list.concat(res)
				})
			},
			getType(type){
				return this.$app.TYPE_MAP[type-1].name
			}
		},
		onLoad({type}) {
			this.current = Number(type) - 1
			this.getList()
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.p ++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	.tab-list{border-bottom: 1rpx solid #eee;position: sticky;top: 0;left: 0;width: 100%;background-color: #fff;z-index: 9;}
	.list{
		padding: 30rpx;
		.item{
			border-radius: 20rpx;padding: 30rpx 40rpx;margin-top: 20rpx;
			&:first-child{margin-top: 0;}
			.top-title{
				color: #fff;padding-bottom: 50rpx;
				.title{margin-right: 20rpx;font-size: 32rpx;}
				.type{font-weight: bold;font-size: 32rpx;}
			}
			.info{
				color: #fff;
				image{display: block;width: 47rpx;height: 53rpx;transform: scale(.7);}
				.price{font-weight: bold;margin-right: auto;font-size: 32rpx;}
				.date{}
			}
			&.num1{background: linear-gradient(145deg, #ff5d5d 25%, #ff5353 0, #ff4747 50%,#ff3737 0,#ff3a33 75%,#ff4747 0,#ff3737 100%);}
			&.num2{background: linear-gradient(145deg, #31a5fb 25%, #24a0fb 0, #2080fc 50%,#2084fe 0,#1c91fc 75%,#228cfc 0,#228cfc 100%);}
			&.num3{background: linear-gradient(145deg, #ffba31 25%, #f8b123 0, #ffbe25 50%,#f7b823 0,#ffc525 75%,#ffb624 0,#ffbe25 100%);}
		}
	}
</style>
